<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <div>
          <el-form
            :inline="true"
            :model="requestParams"
            size="small"
            label-width="80px"
            ref="requestParams"
          >
            <el-row>
              <el-col class="box">
                <el-form-item label="关键字">
                  <el-input
                    v-model="requestParams.keyword"
                    placeholder="根据文章编号搜索"
                    @keyup.enter.native="onSearch"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="onClear">消除</el-button>
                  <el-button type="primary" @click="onSearch">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 搜索 -->
        <!-- 数据记录 -->
        <el-alert
          type="info"
          v-if="alertText !== ''"
          :title="alertText"
          class="alert"
          show-icon
        >
        </el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <template>
          <el-table
            style="width: 100%"
            highlight-current-row
            fit
            :key="tableKey"
            :data="dataList"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            :row-style="{ height: '57px' }"
          >
            <el-table-column label="编号">
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="题型">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType === 1">单选</span>
                <span v-else-if="scope.row.questionType === 2">多选</span>
                <span v-else>简答</span>
              </template>
            </el-table-column>
            <el-table-column label="题目编号">
              <template slot-scope="scope">
                <a
                  href="#"
                  @click.prevent="onQuestionView(item.id)"
                  :key="index"
                  v-for="(item, index) in scope.row.questionIDs"
                  style="color: rgb(0, 153, 255);"
                  >{{ item.number }}</a
                >
              </template>
            </el-table-column>
            <el-table-column label="录入时间">
              <template slot-scope="scope">
                <span>{{ scope.row.addTime | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="答题时间(s)">
              <template slot-scope="scope">
                <span>{{ scope.row.totalSeconds }}</span>
              </template>
            </el-table-column>
            <el-table-column label="正确率">
              <template slot-scope="scope">
                <span>{{ scope.row.accuracyRate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="录入人">
              <template slot-scope="scope">
                <span>{{ scope.row.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="88">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  plain
                  size="small"
                  @click="onDelete(scope.row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- end -->
        <!-- 分页 -->
        <el-pagination
          style="margin-top:20px;text-align:right"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          :page-size="requestParams.pagesize"
          :current-page="requestParams.page"
          @current-change="pager"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange"
          hide-on-single-page
        ></el-pagination>
        <!-- end -->
        <questions-preview
          v-if="isDialogShow"
          v-model="isDialogShow"
          :question-info="questionInfo"
        ></questions-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview'
export default {
  name: 'QuestionsRandoms',
  components: {
    QuestionsPreview
  },
  data() {
    return {
      tableKey: 0,
      dataList: [], // 列表数据
      alertText: '', // 获取总条数
      listLoading: false, // 加载转盘
      total: null,
      requestParams: {
        page: 1,
        pagesize: 10,
        keyword: null
      },
      isDialogShow: false,
      questionInfo: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.listLoading = true
      const { data: res } = await randoms(this.requestParams)
      this.dataList = res.items
      // console.log(res)
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 切换条数
    handleSizeChange(size) {
      this.requestParams.page = 1
      this.requestParams.pagesize = size
      this.getList()
    },
    // 切换分页
    pager(np) {
      this.requestParams.page = np
      this.getList()
    },
    // 清空搜索
    onClear() {
      this.requestParams = {
        keyword: null,
        page: 1,
        pagesize: 10
      }
    },
    // 搜索事件
    onSearch() {
      this.requestParams.page = 1
      this.getList()
      this.onClear()
    },
    // 删除题库
    onDelete(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await removeRandoms({ id })
          if (res.success) {
            this.getList()
            return this.$message.success('删除成功!')
          }
          this.$message.error('删除失败')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 试题预览
    async onQuestionView(id) {
      const { data: res } = await detail({ id })
      this.questionInfo = res
      this.isDialogShow = true
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
}
</style>
